<template>
	<div class="bottom-btn">
		<div class="bottom-icon" ref="icon" :style="{backgroundImage}"></div>
		<div class="bottom-text">{{ text }}</div>
	</div>

</template>

<script>

    import {ref, onUnmounted} from 'vue'

    export default {
        name: "BottomButton",
        props: {
            text: String,
            imgTag: String,
        },
        setup(props) {
            const icon = ref()
            const {imgTag} = props
            const urls = [];
            for (let i = 0; i < 9; i++) {
                const imgUrl = require(`../../static/img/main/icon_main_tab_${imgTag}_0${i}.png`)
                urls[i] = `url(${imgUrl})`
            }
            let curIndex = 0;
            const backgroundImage = ref(urls[curIndex])
            let timer = undefined
            const changeIcon = () => {
                if (curIndex < 8) {
                    curIndex++
                    backgroundImage.value = urls[curIndex]
                } else {
                    clearTimer()
                }
               
            }
            const clearTimer = () => {
                if (timer) {
                    clearInterval(timer)
                    timer = undefined
                }
            }
            const toggle = checked => {
                curIndex = 0;
                clearTimer()
                if (checked) {
                    timer = setInterval(changeIcon, 40)
                } else {
                    backgroundImage.value = urls[curIndex]
                }
            }
            onUnmounted(() => {
                clearTimer()
            })
            return {
                icon,
                backgroundImage,
                toggle,
                ...props
            }
        }

    }
</script>

<style lang="less" scoped>
	.bottom-btn {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.bottom-icon {
		width: 22px;
		height: 22px;
		background-size: 100%;
	}
	
	
	.bottom-text {
		font-size: 11px;
		margin-top: 3px;
	}

</style>
